<template>
  <div class="login-wrap" id="login">
    <div class="box">
      <div class="loginBg"></div>
      <div class="logo">
        <i class="iconfont icon-chanpin"></i>
      </div>
      <div class="loginBox">
        <div class="formBox">
          <div class="inp inpBorder">
            <i class="iconfont icon-chanpin"></i>
            <input type="text" placeholder="请输入用户名" v-model="username">
            <!--<mt-field placeholder="请输入用户名" v-model="username" icon="chanpin"></mt-field>-->
          </div>
          <div class="inp inpBorder">
            <i class="iconfont icon-chanpin"></i>
            <input type="password" placeholder="请输入密码" v-model="password">
            <!--<mt-field  placeholder="请输入密码" v-model="password" icon="chanpin"></mt-field>-->
          </div>
          <div id="inp" class="inp">
            <mt-button type="default" @click="login">登录</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //引入axios
  import {MessageBox} from 'mint-ui';

  export default {

    name: "Login",
    data() {
      return {
        isLogin: '',
        username: '',
        password: '',
      }
    },
    methods: {

      login() {
        //声明变量用于替代this
        let params = {
          username: this.username,
          password: this.password
        };
        this.$store.dispatch('login',params);
      }
    }
  }
</script>

<style scoped>
  html, body, #app, .margin_top, .login-wrap {
    height: 100%;
  }

  .login-wrap {
    background-color: #fff;
  }

  .login-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .login-wrap .box {
    position: relative;
    /*z-index: 2;*/
  }

  .loginBg {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #00aaff;
  }

  .logo {
    color: #fff;
    text-align: center;
    padding-top: 0.9rem;
  }

  .logo .iconfont {
    font-size: 1rem;
    text-shadow: 0.01rem 0 0.1rem #aaa;
  }

  .loginBox {
    width: 85%;
    margin: 0 auto;
    border-radius: 0.08rem;
    box-shadow: 0 0 0.05rem #aaa;
    border-right: 0.08rem;
    background-color: #fff;
  }

  .loginBox .formBox {
    padding: 0.2rem 0 0.3rem;
  }

  .loginBox .inpBorder {
    border-bottom: 1px solid #ddd;
  }

  .loginBox .inp {
    height: 0.44rem;
    position: relative;
    margin-top:0.02rem;
  }

  .loginBox .inp .iconfont {
    position: absolute;
    top: 0.08rem;
    left: 0.25rem;
    font-size: 0.18rem;
    color: #bbb;
    z-index: 9;
  }

  .loginBox .inp input {
    width: 100%;
    height: 100%;
    border: 0;
    text-indent: 0.6rem;
    font-size: 0.16rem;
    position: absolute;
  }

  .loginBox .inp input:focus {
    outline: none;
  }

  .loginBox .inp input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #bbb;
  }

  .loginBox .inp:last-child {
    margin-top: 0.2rem;
  }

  .loginBox .inp button {
    width: 95%;
    margin: 0 2.5%;
    height: 100%;
    color: #fff;
    background-color: #00aaff;
    position: absolute;
  }
</style>
